<template>
  <f7-page class="qm-page">
    <f7-link icon-f7="chevron_left" class="arrow" back></f7-link>
    <f7-block class="qm-block">
      <img src="static/img/land/index3/tubiao.png" alt="" class="img" />
      <h2>欢迎登录工地智采</h2>
      <!-- 登录框 -->
      <f7-list>
        <qm-field
          v-model="user"
          placeholder="请输入您的账号"
          clearable
          clear-trigger="always"
          class="qmfield"
        >
          <template #left-icon>
            <img
              src="static/img/land/index1/login_user.svg"
              alt=""
              class="iconimg"
            />
          </template>
        </qm-field>

        <qm-field
          v-model="password"
          placeholder="请输入您的密码"
          :type="textstyle"
          class="qmfield"
        >
          <template #left-icon>
            <img
              src="static/img/land/index1/login_mima.svg"
              alt=""
              class="iconimg"
            />
          </template>
          <template #right-icon>
            <img
              src="static/img/land/index1/biyan.svg"
              alt=""
              width="30px"
              height="12px"
              v-if="!showpassword"
              @click="modifypassword()"
            />
             <img
            src="static/img/land/index1/kaiyan.svg"
            alt=""
            width="30px"
            height="12px"
            v-else
            @click="modifypassword()"
          />
          </template>
        </qm-field>
        <!-- 此div只为了让密码输入框显示一个下划线 -->
        <div></div>
      </f7-list>
      <!-- 登录按钮 -->
      <f7-button raised fill round class="qm-button">登录</f7-button>
      <div class="denglu">
        <f7-checkbox class="checkbox"></f7-checkbox>
        7天免登录
      </div>
    </f7-block>
    <div class="footer">
      <div class="footertitle">广州市齐明软件科技有限公司提供技术支持</div>
    </div>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      password: "",
      showpassword: false,
    };
  },
  computed: {
    textstyle() {
      if (this.showpassword) {
        return "text";
      } else {
        return "password";
      }
    },
  },
  methods: {
    modifypassword() {
      this.showpassword = !this.showpassword;
    },
  },
};
</script>

<style lang="less" scoped>
.arrow{
  position: fixed;
  color: var(--color-brand);
  margin-top: 10px;
  left: 6%;
  }
.qm-page {
  background: url("../../../../static/img/land/index3/VCG21gic13954072.png");
  background-repeat: no-repeat;
  margin: 0px;
  background-size: 100% calc(565px * var(--ratio));
  background-attachment: fixed;
  width: 100%;
  background-color: var(--color-fill-grey-inverse);
  /deep/.page-content{
    display: flex;
    flex-direction: column;
  }
  .qm-block {
    text-align: center;
    margin-top: calc(74px * var(--ratio));
    .img {
      width: calc(134px * var(--ratio));
      height: calc(134px * var(--ratio));
    }
    h2 {
      font-weight: 600;
      color: #03041f;
    }
    /deep/.van-cell {
      padding-bottom: 0px;
      margin-top: calc(40px * var(--ratio));
    }
    .qmfield {
      margin-left: calc(43px * var(--ratio));
      margin-right: calc(74px * var(--ratio));
      --f7-input-font-size: calc(28px * var(--ratio));
      background-color: rgba(255, 255, 255, 0);
      width: 90%;
      /deep/ .van-field__left-icon {
        line-height: 40px;
        margin-right: calc(15px * var(--ratio));
      }
      /deep/ .van-field__control {
        width: 80%;
      }
      /deep/ .van-field__body {
        justify-content: space-between;
      }

      .iconimg {
        width: calc(25 * var(--ratio));
        height: calc(30px * var(--ratio));
      }
    }
    .qm-button {
      margin: 48px calc(52px * var(--ratio)) 0px;
      height: calc(62px * var(--ratio));
      background-color: var(--color-brand);
      color: var(--color-fill-grey-inverse);
      font-size: var(--font-size-maintitle);
      --f7-button-raised-box-shadow: auto;
    }
    .denglu {
      text-align: center;
      font-size: 12px;
      margin-top: calc(43px * var(--ratio));
      color: #888b8e;
      --f7-checkbox-border-width: 1px;
      --f7-checkbox-inactive-color: #888b8e;
      --f7-checkbox-size: 12px;
      .checkbox {
        margin-right: 10px;
        margin-bottom: 3px;
        /deep/ .icon-checkbox{
          border: 1px solid #d7dbe1;
        }
      /deep/ i:after{
        font-size: 10px;
      }
      }
    }
  }
  .footer {
    text-align: center;
    bottom: 0%;
    font-size: 12px;
    left: 0px;
    right: 0px;
    margin: auto;
    background: url("../../../../static/img/land/index3/VCG218a431c717.png");
    background-repeat: no-repeat;
    margin: 0px;
    background-size: 100% 100%;
    // background-attachment: fixed;
    width: 100%;
    height: 100%;
    .footertitle {
      position: absolute;
      text-align: center;
      color: var(--color-fill-grey-inverse);
      bottom: 10%;
      font-size: 12px;
      left: 0px;
      right: 0px;
    }
  }
   /deep/input:-webkit-autofill { box-shadow: 0 0 0px 1000px #ffff inset !important;}
}
</style>
